import BasePage from '@/components/BasePage'
import CaseCard, { type CardData } from './components/CaseCard'
import style from "./index.module.scss"

const cardDatas: CardData[] = [
    {
        title: "市政工程",
        imgUrl: "/src/assets/municipal-works/case-img1.jpg",
        centerText: "城市及道路照明工程"
    },
    {
        title: "市政工程",
        imgUrl: "/src/assets/municipal-works/case-img2.jpg",
        centerText: "市政公用工程"
    },
    {
        title: "市政工程",
        imgUrl: "/src/assets/municipal-works/case-img3.jpg",
        centerText: "城市园林绿化工程"
    },
    {
        title: "市政工程",
        imgUrl: "/src/assets/municipal-works/case-img4.jpg",
        centerText: "建筑工程施工"
    },
    {
        title: "市政工程",
        imgUrl: "/src/assets/municipal-works/case-img5.jpg",
        centerText: "电子与智能化工程"
    },
    {
        title: "市政工程",
        imgUrl: "/src/assets/municipal-works/case-img6.jpg",
        centerText: "机电工程"
    },
    {
        title: "市政工程",
        imgUrl: "/src/assets/municipal-works/case-img7.jpg",
        centerText: "消防设施工程"
    },
    {
        title: "市政工程",
        imgUrl: "/src/assets/municipal-works/case-img8.jpg",
        centerText: "建筑装修装饰工程"
    },
    {
        title: "市政工程",
        imgUrl: "/src/assets/municipal-works/case-img9.jpg",
        centerText: "环保工程"
    },
]
export default function MunicipalWorks() {
    return (
        <BasePage navOptions={{ theme: "light", absolute: false, backGround: "#2d3038" }}>
            <div className='banner mt-10'>
                <img src="/src/assets/municipal-works/banner.png" alt="" />
            </div>
            <div className={["container", "mx-auto", "my-40", "lg:flex", "lg:flex-wrap", "lg:justify-between"].join(" ")}>
                {cardDatas.map(cardData => (
                    <CaseCard cardData={cardData} key={cardData.centerText} className={`lg:w-[calc(50%-5px)] mb-15`}></CaseCard>
                ))}
            </div>
        </BasePage>
    )
}
